<template>
  <div class="box padd10">
      <div class="left">
        <!-- 输入盒子 -->
        <div class="intBox padd10">
          <div class="item">
            <span class="info">姓名</span>
            <input type="text" id="name" v-model="name"/>
          </div>
          <div class="item">
            <span class="info">评分</span>
            <input type="number" id="score" v-model="score"/>
          </div>
          <div class="item">
            <span class="info">薪资</span>
            <input type="number" id="money" v-model="salary"/>
          </div>
          <div class="btn" id="add" @click="add">新增</div>
        </div>
        <!-- 列表 -->
        <div class="list">
          <div class="title">
            <span class="item">姓名</span>
            <span class="item">评分</span>
            <span class="item">薪资（单位:万）</span>
            <span class="item">操作</span>
          </div>
          <div class="listBox" id="list">
            <div class="one" 
              :class="{editMode: item.id === currentId}" 
              v-for="item in list" 
              :key="item.id">
              <span class="item">
                <span class="info">{{item.name}}</span>
              <input type="text" class="ipt" v-model="item.name">
              </span>
              <span class="item">
                <span class="info">{{item.score}}</span>
              <input type="number" class="ipt" v-model="item.score">
              </span>
              <span class="item">
                <span class="info">{{item.salary}}</span>
              <input type="number" class="ipt" v-model="item.salary">
              </span>
              <span class="item">
                <i class="upd" @click="showEdit(item.id)"></i>
                <i class="del" @click="del(item.id)"></i>
                <i class="yes" @click="currentId = ''"></i>
                <i class="no" @click="no"></i>
              </span>
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="item" id="up"></div>
        <div class="item" id="down"></div>
      </div>
    </div>
</template>

<script>

export default {
  data() {
    return {
      list: [
        {
          id: 1,
          name: '王金元',
          score: 40,
          salary: 150
        },
        {
          id: 2,
          name: '元元',
          score: 100,
          salary: 5
        },
      ],
      name: '',
      score: '',
      salary: '',
      // 记录编辑状态的id
      currentId: '',
      // 记录编辑开始的值
      currentName: '',
      currentScore: '',
      currentSalary: '',
      
    }
  },
  methods: {
    // 添加功能
    add() {
      // 非空判断
      if (!this.name || !this.score || !this.salary) return alert('输入框不能为空')
      // 添加元素
      this.list.push({
        id: Date.now(),
        name: this.name,
        score: this.score,
        salary: this.salary
      })
      this.name = ''
      this.score = ''
      this.salary = ''
    },
    // 删除功能
    del(id) {
      if (this.currentId !== '') return alert ('正在编辑中')
      this.list = this.list.filter(item => item.id !== id)
    },
    // 编辑功能
    showEdit(id) {
      if (this.currentId !== '') return alert ('正在编辑中')
      //  通过id动态控制编辑的类名
      this.currentId = id
      // 记录修改前的对象
      const old = this.list.find(item => item.id === id)
      this.currentName=  old.name
      this.currentScore=  old.score
      this.currentSalary= old.salary
    },
    // 取消功能
    no() {
      // 拿到刚开始编辑的对象
      const obj = this.list.find(item => item.id === this.currentId)
      // 把存下来的值，重新赋值给obj
      obj.name = this.currentName
      obj.score = this.currentScore
      obj.salary = this.currentSalary
      this.currentId = ''
    }
  }
}
</script>

<style>
</style>
